import React, { Component } from 'react'

class SwitchTopNav extends Component {
  changeNav = (index) => () => {
    this.props.setNavIndex(index)
  }

  render() {
    const { currentIndex } = this.props

    return (
      <div className="category-switch-top-nav">
        <ul>
          <li
            onClick={this.changeNav(0)}
            className={currentIndex == 0 ? 'active' : ''}
          >
            分类
          </li>
          <li
            onClick={this.changeNav(1)}
            className={currentIndex == 1 ? 'active' : ''}
          >
            食材
          </li>
          <li className={currentIndex == 0 ? '' : 'right'}></li>
        </ul>
      </div>
    )
  }
}

export default SwitchTopNav
